<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>socket</title>
    <script type="text/javascript" src="utils/websocket.js"></script>
	<script type="text/javascript" charset="utf-8">
		function startSocket()
		{
			var counter = 1;
            ws = new Utils.websocket('ws://localhost:1740', {
                onopen: function(event){
                    document.getElementById('status').innerHTML = "open: " + this.readyState;
                    drawCanvas();
                },
                onmessage: function(event){
                    document.getElementById('stock').innerHTML = event.data;
                    drawIncrement(event.data);
					ws.send(counter++);
                },
                onclose: function(event){
                    document.getElementById('status').innerHTML = "closed";
                },
                onerror: function(event){

                }
            });

			
		}

		function sendMsg(){
			ws.send('1234567890\n');
		}

		function closeSocket(){
			ws.close();
		}


	</script>
	<script type="text/javascript">
	function drawCanvas()
	{
		counter = 15;
		lastPoint = null;
		canvas = document.getElementById('myCanvas');
		ctx = canvas.getContext('2d');
		ctx.strokeStyle = "#efefef";
		ctx.textBaseline = 'middle';
		for(var i = 0; i< 400; i+=10)
		{
			ctx.fillText  (((400-i)/10).toString(), 0, i)
			ctx.beginPath();
			ctx.moveTo(counter,i);
			ctx.lineTo(400,i);
			ctx.closePath();
			ctx.stroke();
		}
	}
	
	function drawLines(lastPoint, nowPoint)
	{
	 	ctx.beginPath();
		ctx.moveTo(counter - 5, canvas.height-(lastPoint*10));
		ctx.strokeStyle="#000";
		ctx.lineTo(counter, canvas.height-(nowPoint*10));
		ctx.stroke();
	}
	
	function drawIncrement(quote)
	{
		ctx.beginPath();
		ctx.arc(counter, canvas.height-(quote*10), 1.5, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		if (lastPoint != null){
			drawLines(lastPoint, quote);
		}
		lastPoint = quote;
		counter = counter + 5;
			
	}
	</script>
</head>
<body >
	<div id="status">
	
	</div>
	<div id="stock">
	
	</div>
	<canvas id="myCanvas" width="400" height="400" style="border:1px dotted;float:left">your browser does 
	not support the canvas tag </canvas>
	<button onclick="startSocket();">Click Me!</button>
	<br/>
	<button onclick="sendMsg();">Send Msg!</button>
	<br/>
	<button onclick="closeSocket();">Close connection</button>
</body>
</html>